<template>
  <view v-if="show" class="toast-container" :class="position">
    <view class="toast-content" :class="[type]">
      <text class="toast-text">{{ text }}</text>
    </view>
  </view>
</template>

<script setup>
// 定义 props
defineProps({
  // 是否显示
  show: {
    type: Boolean,
    default: false
  },
  // 提示文字
  text: {
    type: String,
    default: ''
  },
  // 提示类型：success, error, warning, info
  type: {
    type: String,
    default: 'info'
  },
  // 显示位置：top, center, bottom
  position: {
    type: String,
    default: 'center'
  }
})
</script>

<style scoped>
.toast-container {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  transition: opacity 0.3s;
}

.toast-container.top {
  top: 20%;
}

.toast-container.center {
  top: 50%;
  transform: translate(-50%, -50%);
}

.toast-container.bottom {
  bottom: 20%;
}

.toast-content {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  max-width: 80%;
}

.toast-content.success {
  background-color: #4cd964;
  color: white;
}

.toast-content.error {
  background-color: #dd524d;
  color: white;
}

.toast-content.warning {
  background-color: #f0ad4e;
  color: white;
}

.toast-content.info {
  background-color: #007aff;
  color: white;
}

.toast-text {
  font-size: 28rpx;
  text-align: center;
  word-wrap: break-word;
}
</style>